<script setup lang="ts">
import ProductInfoDetail from "@/views/product/list/components/ProductInfoDetail.vue";
import ProductSaleDetail from "@/views/product/list/components/ProductSaleDetail.vue";
import { addProduct, getProductDetail, updateProduct } from "@/api/product";
import router from "@/router";
import { ProductSaveOrUpdateVO } from "@/api/product/types";
const active = ref(0);
const showStatus = ref([true, false]);
const route = useRoute();
const defaultParam = {
  id: undefined,
  categoryId: undefined,
  title: "",
  itemType: "",
  image: "",
  price: 0,
  num: 1,
  sellPoint: "",
  priority: 1,
  status: 1,
  thumbnails: [],
  categoryName: "",
};
const productParam = ref<ProductSaveOrUpdateVO>(defaultParam);
const props = defineProps({
  isEdit: {
    required: true,
    type: Boolean,
    default: false,
  },
});
const hideAll = () => {
  for (let i = 0; i < showStatus.value.length; i++) {
    showStatus.value[i] = false;
  }
};
const prevStep = () => {
  if (active.value > 0 && active.value < showStatus.value.length) {
    active.value--;
    hideAll();
    showStatus.value[active.value] = true;
  }
};
const nextStep = () => {
  if (active.value < showStatus.value.length - 1) {
    active.value++;
    hideAll();
    showStatus.value[active.value] = true;
  }
};

const finishCommit = (isEdit: boolean) => {
  ElMessageBox.confirm("是否要提交该商品", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      if (isEdit) {
        productParam.value.id = router.currentRoute.value.query
          .id as unknown as number;
        // 拿到id
        productParam.value.id = route.query.id as unknown as number;
        updateProduct(productParam.value).then((response) => {
          ElMessage({
            type: "success",
            message: "商品修改成功",
            duration: 1000,
          });
          router.back();
        });
      } else {
        addProduct(productParam.value).then((response) => {
          ElMessage({
            type: "success",
            message: "商品新增成功",
            duration: 1000,
          });
          // 回到商品列表
          router.push("/product/product-list");
        });
      }
    })
    .catch(() => {});
};
const initData = () => {
  if (props.isEdit) {
    const query = route.query;
    if (query.id) {
      getProductDetail(query.id as unknown as number).then((response) => {
        productParam.value = response.data;
      });
    }
  }
};
initData();
provide("productParam", productParam);
</script>

<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品基本信息" />
      <el-step title="填写商品销售信息" />
    </el-steps>
    <product-info-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @next-step="nextStep"
    />
    <product-sale-detail
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @next-step="nextStep"
      @prev-step="prevStep"
      @finish-commit="finishCommit"
    />
  </el-card>
</template>

<style scoped lang="scss"></style>
